<template>
	<u-checkbox-group @change="checkboxGroupChange">
		<u-checkbox 
			:disabled="disabled" 
			:checked="item.checked" 
			v-for="(item, index) in checkboxs" 
			:key="index" 
			:name="item.value"
			:label="item.text"
			size="16"
			:customStyle="{marginRight: '8px'}"
		>
		</u-checkbox>
	</u-checkbox-group>
</template>
<script>
	import {
		queryDictModelByCode
	} from '../../api/index.js'

	export default {
		name: "checkbox-group",
		model: {
			prop: 'checks',
			event: 'change'
		},
		props: {
			checks: {
				type: String,
				default: '',
			},
			dictName: {
				type: String,
				default: '',
			},
			disabled: {
				type: Boolean,
				default: false,
			},
		},
		data() {
			return {
				list: [],
				checkboxs: [], //选择项
			};
		},
		watch: {
			checks(newData) {
				this.init(newData);
			}
		},
		methods: {
			//字典
			queryDictModelByCodes() {
				const params = {
					dictCode: this.dictName,
				}
				queryDictModelByCode(params).then(res => {
					if (res.success) {
						this.list = res.result || [];
						this.init(this.checks)
					}
				})
			},
			//勾选触发函数
			checkboxGroupChange(val) {
				this.$emit('change', val.join(','))
			},
			//初始化数据
			init(val) {
				this.checkboxs = this.list.map(item => {
					return {
						...item,
						checked: val.split(",").indexOf(item.value) >= 0 ? true : false,
					}
				})
			},
		},
		mounted() {
			//初始化数据
			this.queryDictModelByCodes();
		}
	}
</script>
<style></style>
